<template>
  <!-- Tab切换 -->
  <ul class="tab-list-new flex flex-rb mb-15">
    <li
      class="tab-list-new__item btn"
      v-for="(v, i) in tabs"
      :key="i"
      :class="tabIndex === i ? 'active' : 'click'"
      @click="tabIndex = i"
    >
      {{ v }}
    </li>
  </ul>

  <div class="mb-15">
    <div class="flex flex-rc">
      <div class="title title--bg">{{ tabs[tabIndex] }}</div>
    </div>

    <div class="container mb-15">
      <div class="fz-17 mb-10">{{ $t('规则说明') }}：</div>
      <div class="fz-12" v-if="tabIndex === 0">
        <div>{{ $t('规则说明1') }}</div>
        <div>{{ $t('规则说明2') }}</div>
        <div>{{ $t('规则说明3') }}</div>
        <div>{{ $t('规则说明4', { amount: config.orderAwardAmount }) }}</div>
        <div>{{ $t('奖励金额') }}：</div>
        <div v-for="(v, i) in orderRules" :key="i">
          <div v-if="v.startRank === v.endRank">
            <span>第{{ v.startRank }}名</span>
            <span> ➝ </span>
            <span>{{ v.amount }} PC</span>
          </div>

          <div v-else>
            <span>第{{ v.startRank }}</span>
            <span> - </span>
            <span>{{ v.endRank }}名</span>
            <span> ➝ </span>
            <span>{{ v.amount }} PC</span>
          </div>
        </div>
        <div>{{ $t('规则说明5') }}</div>
        <div>{{ $t('规则说明6') }}</div>
      </div>

      <div class="fz-12" v-else>
        <div>{{ $t('规则说明7') }}</div>
        <div>{{ $t('规则说明8') }}</div>
        <div>{{ $t('规则说明9') }}</div>
        <div>
          {{ $t('规则说明10', { amount: config.promotionLotteryAmount }) }}
        </div>
        <div>{{ $t('奖励金额') }}：</div>
        <div v-for="(v, i) in promotionRules" :key="i">
          <div v-if="v.startRank === v.endRank">
            <span>第{{ v.startRank }}名</span>
            <span> ➝ </span>
            <span>{{ v.amount }} PC</span>
          </div>

          <div v-else>
            <span>第{{ v.startRank }}</span>
            <span> - </span>
            <span>{{ v.endRank }}名</span>
            <span> ➝ </span>
            <span>{{ v.amount }} PC</span>
          </div>
        </div>
        <div>{{ $t('规则说明11') }}</div>
        <div>{{ $t('规则说明12') }}</div>
      </div>
    </div>
  </div>

  <div>
    <div class="flex flex-rc">
      <div class="title title--bg">{{ $t('每日排名') }}</div>
    </div>

    <div class="container flex mb-15">
      <div style="width: 50%">
        <span>{{ $t('奖池状态') }}：</span>
        <span class="cl-primary">
          {{
            config[
              tabIndex === 0
                ? 'residueOrderAwardAmount'
                : 'residuePromotionLotteryAmount'
            ] == 0
              ? '开启'
              : '关闭'
          }}
        </span>
      </div>
      <div style="width: 50%">
        <span>{{ $t('平台业绩') }}：</span>
        <span class="cl-primary">
          {{
            config[
              tabIndex === 0
                ? 'residueOrderAwardAmount'
                : 'residuePromotionLotteryAmount'
            ]
          }}
          PC
        </span>
      </div>
    </div>

    <div class="container">
      <ul class="table table--border fz-12">
        <li class="table__th">
          <div class="table__td" style="width: 35px; flex: unset">
            {{ $t('排名') }}
          </div>
          <div class="table__td" style="width: 170px; flex: unset">
            {{ $t('用户') }}
          </div>
          <div class="table__td">{{ $t('业绩') }}</div>
          <div class="table__td" style="width: 35px; flex: unset">
            {{ $t('奖金') }}
          </div>
        </li>

        <div v-if="records.length">
          <li class="table__tr" v-for="(v, i) in records" :key="i">
            <div class="table__td" style="width: 35px; flex: unset">
              {{ v.rank }}
            </div>
            <div class="table__td" style="width: 170px; flex: unset">
              {{ v.walletAddress }}
            </div>
            <div class="table__td">{{ v.totalAmount }}</div>
            <div class="table__td" style="width: 35px; flex: unset">
              {{ v.bonus }}
            </div>
          </li>
        </div>

        <!-- 空数据 -->
        <van-empty v-else>
          <div class="cl-black">{{ $t('暂无数据') }}</div>
        </van-empty>
      </ul>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { useStore } from '@/store/index'
import mitt from 'js/mitt'
import api from 'js/api'

const store = useStore()

const tabs = ref([t('下单奖池'), t('推荐奖池')])
const tabIndex = ref(0)

const config = computed(() => store.config)
const orderRules = ref([])
const promotionRules = ref([])

const records1 = ref([])
const records2 = ref([])

const records = computed(() => {
  return tabIndex.value === 0 ? records1.value : records2.value
})

getActRule()
getRankList1()
getRankList2()

mitt.on('refresh', () => {
  setTimeout(() => {
    getActRule()
    getRankList1()
    getRankList2()
  }, 3000)
})

// 获取活动奖池规则
async function getActRule() {
  const { code, data } = await api.getActRule()

  if (code === 200) {
    orderRules.value = data.orderRule.filter((v) => v.type === 1)
    promotionRules.value = data.promotionRule.filter((v) => v.type === 0)
  }
}

// 获取每日排名（下单）
async function getRankList1() {
  const params = {
    current: 1,
    size: 30,
  }

  const { code, data } = await api.getRankList1(params)

  if (code === 200) {
    records1.value = data.records
  }
}

// 获取每日排名（推荐）
async function getRankList2() {
  const params = {
    current: 1,
    size: 30,
  }

  const { code, data } = await api.getRankList2(params)

  if (code === 200) {
    records2.value = data.records
  }
}
</script>

<style lang="scss" scoped>
.tab-list-new {
  padding: 0 50px;

  &__item {
    filter: brightness(0.8);

    &.active {
      filter: brightness(1);
    }
  }
}
</style>
